@import '../../../themes/mixins/animations';
@import '../../../themes/mixins/error-message';

.delegationStepsConfirmationDialogWrapper {
  .content {
    .description {
      color: var(--theme-delegation-steps-confirmation-description-color);
      font-family: var(--font-light);
      margin-bottom: 20px;
      span {
        span {
          font-family: var(--font-medium);
        }
      }
    }

    .stakePoolIdWrapper,
    .feesRow {
      font-family: var(--font-medium);
      font-weight: 500;
      line-height: 1.38;
      margin-bottom: 20px;

      .stakePoolIdLabel,
      .feesLabel,
      .depositLabel {
        color: var(--theme-delegation-steps-confirmation-fees-label-color);
        margin-bottom: 6px;
      }

      .stakePoolId {
        color: var(--theme-delegation-steps-confirmation-description-color);
        font-family: var(--font-light);
        user-select: text;
      }

      .calculatingFeesLabel,
      .calculatingDepositLabel {
        @include animated-ellipsis($duration: 1500, $width: 20px);
        --webkit-backface-visibility: hidden;
      }

      .feesAmount,
      .depositAmount {
        color: var(--theme-delegation-steps-confirmation-fees-amount-color);
        user-select: text;

        .feesAmountLabel,
        .depositAmountLabel {
          font-family: var(--font-light);
        }
      }
    }

    .feesRow {
      align-items: center;
      display: flex;
      justify-content: space-between;

      .feesWrapper,
      .depositWrapper {
        flex: 1;
      }
    }

    .hardwareWalletStatusWrapper {
      margin-top: 20px;
      max-width: 640px;
      width: 100%;
    }
  }

  .error {
    @include error-message;
    margin-top: 27px;
    text-align: center;
  }

  :global {
    .LoadingSpinner_component {
      .LoadingSpinner_icon {
        svg {
          path {
            fill: var(
              --theme-button-attention-delete-text-color-disabled
            ) !important;
          }
        }
      }
    }

    .Dialog_contentWrapper::-webkit-scrollbar-track {
      margin-top: -8px;
    }
  }
}
